<template>
  <view>
    <uni-nav-bar
      fixed="true"
      @click-left="back"
      left-text="返回"
      title="忘记密码1"
      left-icon="jiantou2"
      background-color="#007BC3"
    ></uni-nav-bar>
    <view :style="style"></view>
    <!-- <view class="grace-padding">132</view> -->
    <view class="grace-padding">
      <form @submit="formSubmit">
        <view class="input-item">
          <view class="grace-label">手机号:</view>
          <view class="input" style="paading:0;">
            <input placeholder-style="color:#A8A8A7" type="text" name="phonenumber" placeholder="请输入手机号码">
          </view>
        </view>
        <view class="input-item">
          <view class="grace-label">验证码:</view>
          <view class="getcode input" style="paading:0;">
            <input placeholder-style="color:#A8A8A7" type="text" name="phonenumber" placeholder="请输入短信验证码">
            <button class="sendmsg-btn" @tap="getVCode">{{vcodeBtnName}}</button>
          </view>
        </view>

        <button
          @tap="toNext"
          class="btn"
          type="primary"
          style="background:#007BC3; margin-top:30px;"
        >下一步</button>
      </form>
    </view>
  </view>
</template>

<script>
import uniNavBar from "@/components/uninavbar";
import uniIcon from "@/components/uni-icon";
var graceChecker = require("../../graceUI/graceChecker.js");
export default {
  data() {
    return {
      vcodeBtnName: "获取验证码",
      countNum: 120,
      countDownTimer: null
    };
  },
  computed: {
    //获取状态栏高度
    style() {
      var systemInfo = uni.getSystemInfoSync();
      var systo = uni.getSystemInfo();
      var statusBarHeight = systemInfo.statusBarHeight;
      return `height:${statusBarHeight + 44}px`;
    }
  },
  components: {
    uniNavBar,
    uniIcon
  },
  methods: {
    toNext() {
      uni.navigateTo({
        url: "./forgetPasswordtwo"
      });
    },
    back() {
      uni.navigateBack({
        delta: 1
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.grace-padding {
  padding: 6%;
  width: 88%;
  //   background: red;
}
.input-item {
  display: flex;
  // padding: 70upx 0 70upx 0;
  padding-top: 75upx;
  width: 100%;
  font-size: 32upx;
  // justify-content: space-around;
  input {
    font-size: 33upx;
    color: #a8a8a7;
  }
  .getcode {
    display: flex;
  }
  .input {
    border-bottom: 1px solid #c1c0bf;
    flex: 3;
  }
  .grace-label {
    font-size: 33upx;
    flex: 1;
  }
}
.btn {
  height: 66upx;
  line-height: 66upx;
  font-size: 33upx;
  margin-top: 60upx;
}
.sendmsg-btn {
  width: 163upx;
  height: 45upx;
  line-height: 45upx;
  background: #0089e1;
  color: #fff;
  font-size: 24upx;
  padding: 0;
}
</style>